<template>
    <div class="sh-map" id="sh-map">
      <div
        id="china_map"
        :style="{ width: '100%', height: 'calc(100% - 0px)' }"
      ></div>
      <div class="sh-national-exchange">
        <h1>全国交易市场</h1>
        <h2><span>5</span>个</h2>
      </div>
      <ul class="sh__guide__axle">
        <li
          v-for="(item, index) in guideAxle"
          :key="index"
          @click="switchGuide(item, index)"
        >
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  import * as myEchart from 'echarts';
  
  export default {
    name: "ShMap",
    components: {},
    data() {
      return {
        provinces: {
          全国: require("echarts/map/json/china.json"),
          上海: require("echarts/map/json/province/shanghai.json"),
          河北: require("echarts/map/json/province/hebei.json"),
          山西: require("echarts/map/json/province/shanxi.json"),
          内蒙古: require("echarts/map/json/province/neimenggu.json"),
          辽宁: require("echarts/map/json/province/liaoning.json"),
          吉林: require("echarts/map/json/province/jilin.json"),
          黑龙江: require("echarts/map/json/province/heilongjiang.json"),
          江苏: require("echarts/map/json/province/jiangsu.json"),
          浙江: require("echarts/map/json/province/zhejiang.json"),
          安徽: require("echarts/map/json/province/anhui.json"),
          福建: require("echarts/map/json/province/fujian.json"),
          江西: require("echarts/map/json/province/jiangxi.json"),
          山东: require("echarts/map/json/province/shandong.json"),
          河南: require("echarts/map/json/province/henan.json"),
          湖北: require("echarts/map/json/province/hubei.json"),
          湖南: require("echarts/map/json/province/hunan.json"),
          广东: require("echarts/map/json/province/guangdong.json"),
          广西: require("echarts/map/json/province/guangxi.json"),
          海南: require("echarts/map/json/province/hainan.json"),
          四川: require("echarts/map/json/province/sichuan.json"),
          贵州: require("echarts/map/json/province/guizhou.json"),
          云南: require("echarts/map/json/province/yunnan.json"),
          西藏: require("echarts/map/json/province/xizang.json"),
          陕西: require("echarts/map/json/province/shanxi1.json"),
          甘肃: require("echarts/map/json/province/gansu.json"),
          青海: require("echarts/map/json/province/qinghai.json"),
          宁夏: require("echarts/map/json/province/ningxia.json"),
          新疆: require("echarts/map/json/province/xinjiang.json"),
          北京: require("echarts/map/json/province/beijing.json"),
          天津: require("echarts/map/json/province/tianjin.json"),
          重庆: require("echarts/map/json/province/chongqing.json"),
          香港: require("echarts/map/json/province/xianggang.json"),
          澳门: require("echarts/map/json/province/aomen.json"),
          台湾: require("echarts/map/json/province/taiwan.json"),
        },
        myChart: null,
        // {
        //   name: "全国",
        //   scatterData: [], // 撒点数据
        //   mapData: [], // 面板数据
        //   index: 0, // 0:全国,1:省,2:市场
        // }
        guideAxle: [],
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initEchartMap();
      })
    },
    methods: {
      // 右上角切换
      switchGuide(item, index) {
        const guideAxleLast = this.guideAxle.length - 1;
        // 点击当前块不做任何操作
        if (index === guideAxleLast) return;
        this.guideAxle.splice(index + 1);
        if (item.index == 0 || (item.index == 1)) {
          const { name } = item;
          myEchart.registerMap(name, this.provinces[name]);
          this.renderMap(item);
        }
      },
      // 渲染地图
      renderMap(obj) {
        const keyName = obj.name;
        let options = {
          backgroundColor: "#00000000",
          tooltip: {
            show: true,
            triggerOn: "none",
            backgroundColor: '#00000000',
            padding: 0,
            enterable: true,
            transitionDuration: 1,
            axisPointer: {
              type: 'line',
              axis: 'auto',
              snap: true,
            },
            textStyle: {
              color: "#000",
              decoration: "none"
            }
          },
          geo: {
            show: true,
            map: keyName,
            label: {
              normal: {
                color: "#fff",
                fontSize: 12,
                show: true
              },
              emphasis: {
                color: "#fff",
                fontSize: 14,
                show: true
              }
            },
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  // 隐藏地图
                  normal: {
                    opacity: 0, // 为 0 时不绘制该图形
                  }
                },
                label: {
                  show: false // 隐藏文字
                }
              }
            ],
            scaleLimit: {
              min: 1.25,
              max: 25
            },
            roam: true,
            zoom: 1.25,
            itemStyle: {
              normal: {
                borderWidth: 1, // 区域边框宽度
                borderColor: "#A66300", // 区域边框颜色
                areaColor: "#070707", // 区域颜色
              },
              emphasis: {
                borderWidth: 1.5, // 区域边框宽度
                borderColor: "#ffffff", // 区域边框颜色
                areaColor: '#FF9800', // 区域颜色
              }
            }
          },
          visualMap: {
            show: true,
            splitNumber: 5,
            itemWidth: 20,
            itemHeight: 10,
            textGap: 15,
            max: 0,
            padding: 0,
            textStyle: {
              color: "rgba(255,255,255,0.5)"
            },
            inRange: {
              color: ['#4D3602', '#FEE1AA']
            },
            formatter: (valMin, valMax) => {
              const formatValMin = this.numFormatUnit(valMin, 4);
              const formatValMax = this.numFormatUnit(valMax, 4);
              return `${formatValMin.num}-${formatValMax.num}${formatValMax.unit ? formatValMax.unit : "元"}`;
            }
          },
          series: [
            {
              name: "点1",
              type: "scatter",
              coordinateSystem: "geo",
              data: JSON.parse('[{"name":"0012交易市场","value":["121.489912","31.244415"],"id":"TM-1c8839b004464dfb84f936aeee6d0cc5","marketName":"0012","province":"上海市","marketLocation":["31.244415","121.489912"],"accuracyCreditAmount":"0.00","accuracyLoanAmount":"0","repaymentLoanAmount":0,"creditOrgCount":0,"loanOrgCount":0,"pledgorVehicleCount":0,"applyCreditOrgCount":0,"creditTotalCount":0,"balanceTotalAmount":"0.00","actualBalanceAmount":"0.00","visualMap":false},{"name":"m8722交易市场","value":["121.3839","31.175947"],"id":"TM-2562d19b17e9478fba7b848154947265","marketName":"m8722","province":"上海市","marketLocation":["31.175947","121.3839"],"accuracyCreditAmount":"2000000.00","accuracyLoanAmount":"16257.00","repaymentLoanAmount":16257,"creditOrgCount":3,"loanOrgCount":3,"pledgorVehicleCount":8,"applyCreditOrgCount":1,"creditTotalCount":5,"balanceTotalAmount":"0.00","actualBalanceAmount":"0.00","visualMap":false},{"name":"一二交易市场","value":["121.455708","31.249574"],"id":"TM-0a88833966b04039b95d0f6692329785","marketName":"一二","province":"上海市","marketLocation":["31.249574","121.455708"],"accuracyCreditAmount":"0.00","accuracyLoanAmount":"0","repaymentLoanAmount":0,"creditOrgCount":0,"loanOrgCount":0,"pledgorVehicleCount":0,"applyCreditOrgCount":1,"creditTotalCount":1,"balanceTotalAmount":"0.00","actualBalanceAmount":"0.00","visualMap":false},{"name":"成都锦和市场测试671","value":["104.017594","30.578247"],"id":"671","marketName":"成都锦和市场测试671","province":"四川省","marketLocation":["30.578247","104.017594"],"accuracyCreditAmount":"0.00","accuracyLoanAmount":"0","repaymentLoanAmount":0,"creditOrgCount":0,"loanOrgCount":0,"pledgorVehicleCount":1,"applyCreditOrgCount":0,"creditTotalCount":1,"balanceTotalAmount":"0.00","actualBalanceAmount":"0.00","visualMap":false},{"name":"武汉市民之家交易市场","value":["114.295164","30.659795"],"id":"TM-00889f1ee2974d188e4e793d8a03762a","marketName":"武汉市民之家","province":"湖北省","marketLocation":["30.659795","114.295164"],"accuracyCreditAmount":"0.00","accuracyLoanAmount":"0","repaymentLoanAmount":0,"creditOrgCount":0,"loanOrgCount":0,"pledgorVehicleCount":0,"applyCreditOrgCount":0,"creditTotalCount":1,"balanceTotalAmount":"0.00","actualBalanceAmount":"0.00","visualMap":false}]'),
              symbol: 'image://' + require('@/assets/sh/homePage/撒点_授用信.png'),
              symbolSize: 30,
              color: { opacity: 1 },
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: true,
                  fontSize: 14,
                  formatter(params) {
                    return params.data.name
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: "#0066FF",
                },
                emphasis: {
                  color: "#14FF00"
                }
              },
              zlevel: 2,
            },
            {
              type: 'map',
              map: keyName,
              geoIndex: 0,
              aspectScale: 0.75, //长宽比
              showLegendSymbol: true, // 存在legend时显示
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              roam: true,
              itemStyle: {
                normal: {
                  areaColor: '#FFF0D1',
                },
                emphasis: {
                  areaColor: '#FFBA2E'
                }
              },
              animation: true,
              data: JSON.parse('[{ "province": "北京市", "creditAmount": 140.15, "loanAmount": 17, "repaymentLoanAmount": 150000, "accuracyCreditAmount": 1401500, "accuracyLoanAmount": 170000, "creditOrgCount": 4, "loanOrgCount": 2, "pledgorVehicleCount": 33, "applyCreditOrgCount": 10, "creditTotalCount": 16, "name": "北京", "value": 170000 }, { "province": "陕西省", "creditAmount": 500, "loanAmount": 0.11, "repaymentLoanAmount": 1100, "accuracyCreditAmount": 5000000, "accuracyLoanAmount": 1100, "creditOrgCount": 1, "loanOrgCount": 1, "pledgorVehicleCount": 3, "applyCreditOrgCount": 0, "creditTotalCount": 1, "name": "陕西", "value": 1100 }, { "province": "上海市", "creditAmount": 610, "loanAmount": 0.01, "repaymentLoanAmount": 117, "accuracyCreditAmount": 6100000, "accuracyLoanAmount": 117, "creditOrgCount": 4, "loanOrgCount": 2, "pledgorVehicleCount": 11, "applyCreditOrgCount": 2, "creditTotalCount": 8, "name": "上海", "value": 117 }]'),
            },
          ]
        }
        options.visualMap.max = this.handlerVisualMapMax(191231);
        this.myChart.setOption(options, true)
      },
      //初始化中国地图
      initEchartMap() {
        let mapDiv = document.getElementById('china_map');
        let shMap = document.getElementById('sh-map');
  
        let obj = {
          name: "全国",
          scatterData: [], // 撒点数据
          mapData: [], // 面板数据
          index: 0, // 0:全国,1:省,2:市场
        }
        myEchart.registerMap(obj.name, this.provinces[obj.name])
  
        this.resizeMyChartContainer(mapDiv, shMap);
        this.myChart = myEchart.init(mapDiv);
  
        this.guideAxle.push(obj);
        this.renderMap(obj);
        window.onresize = () => {
          this.resizeMyChartContainer(mapDiv, shMap);
          this.myChart.resize();
        }
  
        // 注册点击事件
        this.myChartGetZrClick();
        this.myChartClick();
      },
      // 地图容器宽度
      resizeMyChartContainer(mapDiv, shMap) {
        mapDiv.style.width = shMap.offsetWidth + 'px'
      },
      // map getZr click 
      myChartGetZrClick() {
        this.myChart.getZr().on('click', params => {
          // 鼠标点击地图外 还原地图大小
          if (!params.target) {
            const currentIndex = this.guideAxle.length - 1;
            const currentGuide = this.guideAxle[currentIndex];
            this.renderMap(currentGuide.index === 2 ? this.guideAxle[currentIndex - 1] : currentGuide)
          }
        })
      },
      // map click
      myChartClick() {
        this.myChart.on("click", params => {
          const { name } = params;
          const guideAxleLast = this.guideAxle.length - 1;
          let currentIndex = this.guideAxle[guideAxleLast].index;
          // 是否替换, // 是否处理添加
          let isReplace, ishandlerAdd = false;
          let obj = {
            name,
            scatterData: [],
            mapData: [],
            index: 0,
          }
  
          if (params.seriesType === "map" && params.data) {
            ishandlerAdd = true;
            obj.index = 1;
  
            myEchart.registerMap(name, this.provinces[name]);
            this.renderMap(obj);
  
            if (currentIndex !== 0) isReplace = true;
          }
          if (params.seriesType === "scatter") {
            ishandlerAdd = true;
            obj.index = 2;
            if (currentIndex === 2) isReplace = true;
          }
  
          if (!ishandlerAdd) return;
          if (isReplace) {
            this.guideAxle.splice(guideAxleLast, 1, obj)
          } else {
            this.guideAxle.push(obj)
          }
        });
      },
      // 格式化金额
      numFormatUnit(num, toFixed = 2, returnResult = "obj") {
        let m = {
          num: 0,
          unit: ""
        }
        if (!num) {
          m.num = num;
          return returnResult === 'obj' ? m : m[returnResult];
        };
        const moneyUnits = ["元", "万元", "亿元", "万亿"]
        const dividend = 10000;
        let curentNum = Number(num);
        const strNumSize = (tempNum) => {
          const stringNum = tempNum.toString()
          const index = stringNum.indexOf(".")
          let newNum = stringNum;
          if (index != -1) {
            newNum = stringNum.substring(0, index)
          }
          return newNum.length
        }
        //转换数字
        let curentUnit = moneyUnits[0];
        //转换单位
        let i = 0;
        for (; i < 4; i++) {
          curentUnit = moneyUnits[i]
          if (strNumSize(curentNum) < 5) {
            break;
          }
          curentNum = curentNum / dividend
        }
        toFixed = i > 1 ? toFixed : 0;
        m.num = curentNum.toFixed(toFixed).toString()
          .replace(/(^|\s)\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, "'"));
        m.unit = curentUnit;
        return returnResult === 'obj' ? m : m[returnResult];
      },
      // 地图左下角整数格式化单位
      handlerVisualMapMax(val, splitNumber = 5) {
        val = val / splitNumber + "";
        let newVal = +val[0] + 1 + "";
        while (newVal.length < val.length) {
          newVal += "0"
        }
        return newVal * splitNumber;
      },
    }
  }
  </script>
  
  <style lang="scss">
  @mixin flex($justifyContent: flex-start, $alignItems: flex-start) {
    display: flex;
    align-items: $alignItems;
    justify-content: $justifyContent;
  }
  .sh-map {
    flex: 1;
    width: 100%;
    height: 100%;
    position: relative;
    #china_map {
      position: relative;
      z-index: 2;
    }
    .sh-national-exchange {
      position: absolute;
      z-index: 1000;
      left: 0;
      top: 0;
      color: #ffffff;
      h1 {
        font-size: 16px;
        font-weight: 400;
        margin-bottom: 0;
      }
      h2 {
        font-size: 14px;
        font-weight: 400;
      }
      span {
        font-size: 52px;
        color: #ffd522;
        font-family: "DIN Alternate Bold";
        margin-right: 8px;
        font-weight: 400;
        vertical-align: sub;
      }
    }
    .sh__guide__axle {
      position: absolute;
      z-index: 99;
      top: 0;
      right: 20px;
      padding: 0;
      margin: 0;
      li {
        cursor: pointer;
        list-style: none;
        margin-bottom: 24px;
        font-size: 14px;
        color: #ffffff;
        text-align: right;
        span {
          font-weight: 400;
          display: inline-block;
          padding: 9px 16px;
          background: rgba(255, 255, 255, 0.06);
          border-radius: 2px;
          border: 1px solid rgba(255, 255, 255, 0.3);
          position: relative;
          &::before,
          &::after {
            content: "";
            display: inline-block;
            position: absolute;
            right: -20px;
            top: 16px;
          }
          &::before {
            width: 1px;
            height: 65px;
            background: rgba(255, 255, 255, 0.3);
          }
          &::after {
            width: 5px;
            right: -22.5px;
            height: 5px;
            background: #ffd522;
            border-radius: 50%;
          }
        }
  
        &:last-child {
          span {
            color: #ffd522;
            font-weight: 600;
            box-shadow: 0px 0px 4px 1px #f7c76596;
            border: 1px solid #f7c765;
            &::before {
              width: 100%;
              height: 1px;
              left: 0;
              top: 99%;
              background: linear-gradient(
                266deg,
                #fffcf6 0%,
                #fff1d3 4%,
                #f7c765 28%
              );
            }
          }
        }
      }
    }
  }
  </style>